<template>
	<view style="padding: 30upx 21upx">
		<view class="article-list" @click="bindClick">
			<view class="article-author">
				<cover-image
					class="cicle-pic"
					:src="getImageUrl(author.authorPic)"
					@click="authorCenter"
				></cover-image>
				<text class="author-name">{{ author.authorName }}</text>
			</view>
			<swiper
				class="article-img-swiper"
				:indicator-dots="false"
				:autoplay="false"
				:circular="true"
				@change="showPageSize"
			>
				<swiper-item
					v-for="(image, imageIndex) in article.headerPicUrls"
					:key="imageIndex"
					style="border-radius: 12upx"
					class="img_swiper_item"
				>
					<cover-image :src="getImageUrl(image)"></cover-image>
					<text class="img_indicator" v-if="showArticleImageindicator">
						{{ (articleImageIndex+1) + '/' + article.headerPicUrls.length }}
					</text>
				</swiper-item>
			</swiper>
			<text class="article-title-text">{{ article.articleTitle }}</text>
			<view class="article-browse"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'uni-article-list',
	data() {
		return {
			articleImageIndex: 0,
			resServerBaseUrl: 'https://a8-domain.pagoda.com.cn:11052/miResourceMgr'
		};
	},
	computed: {
		showArticleImageindicator() {
			return this.article.headerPicUrls.length > 1;
		}
	},
	props: {
		author: {
			type: Object,
			default: function(e) {
				return {};
			}
		},
		article: {
			type: Object,
			default: function(e) {
				return {};
			}
		}
	},
	methods: {
		like(e) {
			this.$emit('like');
		},
		authorCenter() {
			this.$emit('authorCenter');
		},
		bindClick() {
			this.$emit('click');
		},
		getImageUrl(url) {
			if (url.length === 0) {
				return '';
			}
			if (url.match('^http[s]?://.+') == null) {
				return this.resServerBaseUrl + url;
			}
			return url;
		},
		showPageSize(e) {
			this.articleImageIndex = e.mp.detail.current;
			console.log(this.$options._componentTag, 'articleImageIndex = ' + this.articleImageIndex);
		}
	}
};
</script>

<style>
.article-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex: 0;
	border-bottom-width: 20upx;
	border-bottom-style: solid;
	border-bottom-color: #f5f5f5;
}

.article-author {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.article-author .cicle-pic {
	width: 40upx;
	height: 40upx;
	border-radius: 20upx;
}

.article-author .article-img {
	width: 40upx;
	height: 40upx;
	border-radius: 20upx;
}

.article-author .author-name {
	padding: 0 0 0 16upx;
	display: flex;
	align-items: center;
	font-size: 24upx;
	color: #666666;
}

.article-img-swiper {
	flex-direction: column;
	flex: 0;
	display: flex;
	width: 100%;
	height: 340upx;
	margin: 24upx 0 20upx 0;
}
.img_swiper_item {
	position: relative;
}

.article-img-swiper .img_indicator {
	position: absolute;
	right: 20upx;
	bottom: 20upx;
	width: 64upx;
	height: 34upx;
	background: rgba(51, 51, 51, 1);
	border-radius: 18upx;
	opacity: 0.4;
	font-size: 22upx;
	color: #ffffff;
	text-align: center;
}

.article-title-text {
	color: #333333;
	font-size: 28upx;
	text-align: left;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
	display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
	-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
	-webkit-line-clamp: 2; /* 文本需要显示多少行 */
}

.article-browse {
}
</style>
